<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>轮播图</title>
  <style type="text/css">
  * {
    padding: 0;
    margin: 0;
  }
  .image {
    list-style: none;
  }
  .box {
    width: 800px;
    height: 400px;
    position: relative;
    margin: 50px auto;
  }
  .image li {
    width: 100%;
    height: 454px;
    float: left;
    position: absolute;
    display: none;
  }
  img {
    width: 100%;
    height: 90%;
    margin: 0 auto;
  }
  .num {
    position: absolute;
    list-style: none;
    cursor: pointer;
    bottom: 20px;
    left: 330px;
  }
  .num li {
    float: left;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: gray;
    margin: 0 4px;
    text-align: center;
    line-height: 20px;
  }
  .num .current {
    background-color: red;
  }
  .arrow {
    height: 60px;
    width: 30px;
    position: absolute;
    cursor: pointer;
    background-color: black;
    color: white;
    opacity:0.5;
    font-size: 20px;
    text-align: center;
    line-height: 60px;
    top: 197px;
    display: none;
  }
  .left {
    left: 0;
  }
  .right {
    right: 0;
  }
  </style>
  <!-- 轮播图css样式部分 -->
</head>
<body>
  <!-- 轮播图html部分 -->
  <div class="box">
    <ul class="image">
      <li><img src="./assets/01.jpg" /></li>
      <li><img src="./assets/02.jpg" /></li>
      <li><img src="./assets/03.jpg" /></li>
      <li><img src="./assets/04.jpg" /></li>
      <li><img src="./assets/02.jpg" /></li>
    </ul>
    <ul class="num">
      <li class="current">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
    <div class="left arrow"> < </div>
    <div class="right arrow"> > </div>
  </div>
<!-- 轮播图javascript部分 -->
<script src="./jq/jquery-1.10.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  var i =0;
  var sum = $('.image li').length;
  // 开启轮播
  function startLunbo(){
    if(i==sum){
      i=0;
    }
    $('.image>li').eq(i).fadeIn().siblings().fadeOut();
    $('.num>li').eq(i).addClass("current").siblings().removeClass("current")
  }

  // 自动轮播
  function iLunbo(){
    timer = setInterval(() => {
      i++;
      
      if(i==sum) {
        i=0;
      }
      startLunbo()
    }, 2000);
  }
  $(function(){
    $('.image li').eq(0).show(); // 默认加载第一张

    iLunbo();
    
    $('.num>li').mouseover(function(){
      clearInterval(timer);
      i=$(this).index();
      startLunbo();
    });

    $('.box').hover(function(){
      $('.arrow').show();
      clearInterval(timer);
    },function(){
      $('.arrow').hide();
      iLunbo();
    })

    $(".left").click(function(){
      clearInterval(timer);
      if(i==0){
        i=sum;  //当点击到第一张时下一次点击回到最后一张图
      }
      i--;
      startLunbo();
      iLunbo()
    })
    $(".right").click(function(){
      clearInterval(timer);
      if(i==sum){
        i=0;  //当点击到最后一张时下一次点击回到图第一张
      }
      i++;
      startLunbo();
      iLunbo()
    })
  })

</script>
</body>
</html>